<template>
  <el-dialog
    v-el-drag-dialog
    :title="title"
    :visible.sync="visible"
    width="600px"
    @closed="reset"
  >
    <div class="box">
      <h2>安检周期</h2>
      <el-radio-group v-model="data.limitDays">
        <el-radio :label="-365">一年</el-radio>
        <el-radio :label="-90">一季度</el-radio>
        <el-radio :label="-30">一个月</el-radio>
        <el-radio :label="data.limitDays > 0 ? data.limitDays : 'day'">
          上次安检后&nbsp;
          <el-input v-model="value" size="mini" @input=" value=value.replace(/[^d]/g,'') " />
          &nbsp;后
        </el-radio>
      </el-radio-group>
    </div>
    <div class="box1">
      <h2>周期内安检规则</h2>
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="安检周期内不允许重复随单安检" />
        <el-checkbox label="安检周期内不允许重复定期安检" />
        <el-checkbox label="超期未安检提醒" />
        <el-checkbox label="随单安检更新安检时间" />
      </el-checkbox-group>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        关闭
      </el-button>
      <el-button @click="synchronization">
        同步上级配置
      </el-button>
      <el-button type="primary" @click="success">
        保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { checkConfigPeriod, checkConfigList, checkConfigPeriodSave } from '@/api'

  export default {
    name: 'periodset',
    data() {
      return {
        visible: false,
        title: '',
        value: '',
        isCheckList: false,
        data: {},
        rule: '',
        cardVal: {},
        treeVal: {},
        params: {},
        checkList: [],
        checkboxGroup1: [],
        checkboxGroup2: [],
        checkboxGroup3: [],
        checkboxGroup4: []
      }
    },
    async created() {},
    methods: {
      open(cardVal, treeVal) {
        this.cardVal = cardVal
        this.treeVal = treeVal
        this.title = `安检周期--->数据来源:${treeVal.orgName}`
        this.getPeriod()
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      async getPeriod() {
        const res = await checkConfigPeriod({
          csmType: this.cardVal.value,
          orgId: this.treeVal.orgId,
          orgSNNo: this.treeVal.orgSNNo
        })
        if (res.data) {
          this.data = res.data
          this.value = this.data.limitDays > 0 ? this.data.limitDays : ''
          if (this.data.checkOption & 1 > 0) {
            this.checkboxGroup1 = ['安检周期内不允许重复随单安检']
          } else {
            this.checkboxGroup1 = []
          }
          if (this.data.checkOption >> 1 & 1 > 0) {
            this.checkboxGroup2 = ['超期未安检提醒']
          } else {
            this.checkboxGroup2 = []
          }

          if (this.data.checkOption >> 2 & 1 > 0) {
            this.checkboxGroup3 = ['随单安检更新安检时间']
          } else {
            this.checkboxGroup3 = []
          }

          if (this.data.checkOption >> 3 & 1 > 0) {
            this.checkboxGroup4 = ['安检周期内不允许重复定期安检']
          } else {
            this.checkboxGroup4 = []
          }
          this.checkList = [...this.checkboxGroup1, ...this.checkboxGroup2, ...this.checkboxGroup3, ...this.checkboxGroup4]
        }
      },
      // 同步上级操作
      async synchronization() {
        const { status } = await checkConfigList({
          csmType: this.cardVal.value,
          orgId: this.treeVal.orgId,
          checkType: this.cardVal.id
        })
        if (status === 200) {
          this.getPeriod()
        }
      },
      async success() {
        this.isCheckList = !!this.checkList.length
        if (this.isCheckList) {
          var num = 0
          var num1 = 0
          var num2 = 0
          var num3 = 0
          this.checkList.map(item => {
            if (item === '安检周期内不允许重复随单安检') {
              num = 1
            }
            if (item === '超期未安检提醒') {
              num1 = 1 << 1
            }
            if (item === '随单安检更新安检时间') {
              num2 = 1 << 2
            }
            if (item === '安检周期内不允许重复定期安检') {
              num3 = 1 << 3
            }
          })
          this.params.orgSNNo = this.treeVal.orgSNNo
          this.params.orgName = this.treeVal.orgName
          this.params.orgId = this.treeVal.orgId
          this.params.parentId = this.treeVal.parentId
          this.params.csmType = this.cardVal.value
          this.params.checkOption = num + num1 + num2 + num3
          this.params.inherit = 0
          if (this.data.limitDays === 'day') {
            if (this.value) {
              this.params.limitDays = this.value
              const { status } = await checkConfigPeriodSave([this.params])
              if (status === 200) {
                this.$message({
                  type: 'success',
                  message: '保存成功'
                })
                return new Promise(resolve => {
                  this.resolve = resolve
                  this.visible = false
                })
              }
            } else {
              this.$message({
                message: '请输入居民用户安检周期天数',
                type: 'warning'
              })
            }
          } else {
            this.params.limitDays = this.data.limitDays
            const { status } = await checkConfigPeriodSave([this.params])
            if (status === 200) {
              this.$message({
                type: 'success',
                message: '保存成功'
              })
              return new Promise(resolve => {
                this.resolve = resolve
                this.visible = false
              })
            }
          }
        } else {
          this.$message({
            message: '请勾选安检规则',
            type: 'warning'
          })
        }
      },
      reset() {}
    }
  }
</script>

<style lang="scss" scoped>
h2 {
  padding: 0;
  padding-left: 12px;
  margin: 0;
  margin-bottom: 14px;
  font-family: Microsoft YaHei, Microsoft YaHei-Bold;
  font-size: 14px;
  font-weight: 700;
  color: #01999f;
  border-left: 4px solid #01999f;
}
/deep/.el-input {
  width: 36px;
}
/deep/.el-input__inner {
  padding: 0;
  text-align: center;
}
/deep/.el-radio-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/deep/.el-radio__label {
  padding-left: 4px;
}
.box {
  margin-right: 20px;
  margin-bottom: 38px;
  margin-left: 20px;
}
.box1 {
  margin-left: 20px;
}
/deep/.el-checkbox-group {
  display: flex;
  flex-direction: column;
  line-height: 38px;
}
</style>
